<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="关键字" prop="keywords">
          <el-input
            v-model="queryParams.keywords"
            placeholder="请输入关键字"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <i-ep-search />
            搜索
          </el-button>
          <el-button @click="resetQuery">
            <i-ep-refresh />
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <el-table v-loading="loading" :data="tableList" highlight-current-row border>
        <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
        <el-table-column key="name" label="建设单位名称" align="center" prop="name" width="220" />
        <el-table-column key="code" label="社会信用代码" align="center" prop="code" width="180" />
        <el-table-column key="areaName" label="归属区域" width="200" align="center" prop="areaName" />
        <el-table-column key="typeName" label="建设单位类型" align="center" prop="typeName" width="140" />
        <el-table-column key="regAddr" label="注册地址" align="center" width="200" prop="regAddr"> </el-table-column>
        <el-table-column key="officeAddr" label="办公地址" align="center" width="200" prop="officeAddr">
        </el-table-column>
        <el-table-column key="legalman" label="法人姓名" width="160" align="center" prop="legalman"> </el-table-column>
        <el-table-column key="legalCardno" label="法人身份证号码" width="200" align="center" prop="legalCardno" />
        <el-table-column key="legalMobile" label="法人手机号码" width="200" align="center" prop="legalMobile" />
        <el-table-column key="createTime" label="创建时间" width="200" align="center" prop="createTime" />
        <el-table-column label="操作" fixed="right" :min-width="200">
          <template #default="scope">
            <el-button
              v-hasPerm="['corp:constructorinfo:edit']"
              type="primary"
              link
              size="small"
              @click="handelEdit(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              v-hasPerm="['corp:constructorinfo:delete']"
              type="primary"
              link
              size="small"
              @click="handelDelete(scope.row)"
            >
              删除
            </el-button>
            <el-button
              v-hasPerm="['corp:constructorinfo:resetpassword']"
              type="primary"
              link
              size="small"
              @click="handelResetPassword(scope.row)"
            >
              重置密码
            </el-button>
            <el-button type="primary" link size="small" @click="openDialog(scope.row.constructorId, '详情')">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageIndex"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>
    <edit-form v-if="dialogEdit.visible" :improve-information-dialog="dialogEdit" @send-close="sendClose"></edit-form>
    <!--	详情 	-->
    <detail
      v-if="dialogConstructor.visible"
      :dialog-constructor="dialogConstructor"
      class="system"
      :style="{ '--mobileAddFormHeight': mobile === 'mobile' ? screenHeight - 117 + 'px' : 'auto' }"
      @send-close="sendClose"
    ></detail>
  </div>
</template>

<script lang="ts">
export default {
  name: "Constructor",
};
</script>

<script lang="ts" setup>
import PasswordInput from "@/components/PasswordInput/index.vue";
import { ref, reactive, computed } from "vue";
import { constructorListForm, ParamsType } from "@/api/system/constructor/types";
import { getConstructorList, deleteConstructor, ResetPassword } from "@/api/system/constructor/index";
import { useUserStore } from "@/store/modules/user";
import Detail from "./detail.vue";
import editForm from "./editForm.vue";

import { useScreen } from "@/store/modules/screen";

const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const screenHeight = computed(() => screenStore.screenHeight);

function initScreen() {}

const useUser = useUserStore();

const total = ref(0);
const loading = ref(false);
const queryFormRef = ref(ElForm);
const tableList = ref<constructorListForm[]>();
const queryParams = reactive<ParamsType>({
  pageIndex: 1,
  pageSize: 20,
});
const currentUserId = useUser.objectId;

const dialogConstructor = reactive<DialogOption>({
  visible: false,
  title: "建设单位详情",
  footBtn: "",
});

const dialogEdit = reactive<DialogOption>({
  visible: false,
  title: "编辑企业",
  footBtn: "",
});

/* 列表查询 */
async function handleQuery() {
  loading.value = true;
  let list = await getConstructorList(queryParams);
  if (list.type === 0) {
    if (list.success) {
      tableList.value = list.data.list;
      queryParams.pageIndex = list.data.pageNum;
      queryParams.pageSize = list.data.pageSize;
      total.value = list.data.total;
    } else {
      ElMessage.error(list.msg);
    }
  } else {
    ElMessage.error(list.msg);
  }
  loading.value = false;
}

/**
 * 重置查询
 */
function resetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageIndex = 1;
  queryParams.pageSize = 20;
  handleQuery();
}

/* 详情 */
function openDialog(id: number, detail: string) {
  dialogConstructor.title = "建设单位详情";
  dialogConstructor.footBtn = "";
  dialogConstructor.id = id;
  dialogConstructor.detail = detail;
  dialogConstructor.visible = true;
}

/* 编辑 */
function handelEdit(row: any) {
  dialogEdit.visible = true;
  dialogEdit.title = "编辑企业";
  dialogEdit.footBtn = "保存";
  dialogEdit.id = row.constructorId;
}
/* 删除 */
function handelDelete(row: any) {
  ElMessageBox.confirm("确定删除该建设单位吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    let res = await deleteConstructor(row.constructorId);
    if (res.type === 0) {
      if (res.success) {
        ElMessage.success(res.msg);
        handleQuery();
      } else {
      }
    } else {
    }
  });
}

const passwordForm = ref({
  password: "",
});
const validatePassword = ref<boolean>(false);
/* 重置密码 */
function handelResetPassword(row: any) {
  ElMessageBox({
    title: "确定重置该建设单位密码吗？",
    message: () =>
      h("div", [
        h(
          ElForm,
          {
            model: passwordForm,
            labelWidth: "80px",
          },
          [
            h(
              ElFormItem,
              {
                rules: [
                  {
                    required: true,
                    message: "请输入密码",
                  },
                ],
                label: "密码",
                prop: "password",
              },
              [
                h(PasswordInput, {
                  onInputChange: (value: string, allow: boolean) => {
                    passwordForm.value.password = value;
                    validatePassword.value = allow;
                  },
                }),
              ]
            ),
          ]
        ),
      ]),
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    showCancelButton: true,
    beforeClose(action, instance, done) {
      if (action === "confirm") {
        if (!validatePassword.value) return;
        instance.confirmButtonLoading = true;
        instance.confirmButtonText = "执行中...";
        ResetPassword(row.constructorId, passwordForm.value.password)
          .then((res) => {
            if (res.success) {
              ElMessage({
                type: "success",
                message: res.msg,
              });
              instance.confirmButtonLoading = false;
              instance.confirmButtonText = "确定";
              done();
            } else {
              ElMessage({
                type: "error",
                message: res.msg,
              });
            }
          })
          .finally(() => {
            loading.value = false;
          });
      } else {
        done();
      }
    },
  });
}

function sendClose(query: boolean) {
  dialogConstructor.visible = false;
  dialogEdit.visible = false;
  if (query) {
    handleQuery();
  }
}

onMounted(() => {
  initScreen();

  handleQuery();
});
</script>

<style lang="less" scoped></style>
